<template>
  <div class="card-container__warp" :style="{width: width, height: height}" v-show="show">
    <div class="card-container__header">
      <div class="header-left">
        <div class="header-left__label"></div>
        <p>{{title}}</p>
      </div>
      <div class="header-right"><p @click="labelFunc">{{label}}</p></div>
    </div>
    <slot></slot>
    <div class="card-container__footer" v-if="more">
      <span @click="moreFunc">{{more}}</span>
    </div>
  </div>
</template>

<script>
  import config from '../../action/config'
export default {
  name: "cardContainer",
  props: {
    title: String,
    label: String,
    more: String,
    width: String,
    height: String,
    show:{
      type:Boolean,
      default:true,
    },
    clickToGetMore:{
      type:Function,
      default:()=>({}),
    },
    clickToGetLabel:{
      type:Function,
      default:()=>({}),
    },
  },
  methods:{
    labelFunc(){
      this.$emit(config.event.listenCardConLabel,1)
    },
    moreFunc(){

      this.$emit(config.event.listenCardConMore,1)
    },

  },
}
</script>

<style lang="scss" scoped>
.card-container__warp{
  @include border-radius(4*$length);
  background-color: #fff;
  .card-container__header{
    height: 56*$length;
    border-bottom: 1*$length solid #EFEFEF;
    vertical-align: middle;
    @extend %flex-row-spb;
    .header-left{
      @extend %flex-row-spb;
      .header-left__label{
        width: 4*$length;
        height: 16*$length;
        background-color: #00AAE6;
        border-radius: 0 2*$length 2*$length 0;
      }
      > p{
        margin-left: 12*$length;
        @include fontStyle(16,22,500,#2F2F2F,left);
      }
    }
    .header-right{
      margin-right: 24*$length;
      @include fontStyle(13,18,500,#999,left);
      @extend %cursorPointer;
      @extend %animate-transition;
      &:hover{
        color: #00AAE6;
      }
    }
  }
  .card-container__footer{
    @include fontStyle(13,18,500,#999,center);
    height: 70*$length;
    line-height: 70*$length;
    > span{
      @extend %animate-transition;
      @extend %cursorPointer;
      &:hover{
        color: #00AAE6;
      }
    }
  }
}
</style>
